<script setup>
import { ref, onMounted, computed } from 'vue';
import BaseLayout from '@/views/layout/BaseLayout.vue';

const isLoaded = ref(false);
const activeTab = ref('all');

// 图片资源导入
const explore1 = new URL('@/assets/home/explore1.jpg', import.meta.url).href;
const explore3 = new URL('@/assets/home/explore3.jpg', import.meta.url).href;
const explore5 = new URL('@/assets/home/explore5.jpg', import.meta.url).href;

// 模拟订单数据
const orders = ref([
  {
    id: 'OD2023121501',
    title: '北京三日游',
    date: '2023-12-15',
    status: 'completed',
    amount: 1299,
    image: explore1
  },
  {
    id: 'OD2023121002',
    title: '上海外滩一日游',
    date: '2023-12-10',
    status: 'processing',
    amount: 499,
    image: explore3
  },
  {
    id: 'OD2023110503',
    title: '重庆两江夜游',
    date: '2023-11-05',
    status: 'canceled',
    amount: 299,
    image: explore5
  }
]);

const filteredOrders = computed(() => {
  if (activeTab.value === 'all') {
    return orders.value;
  }
  return orders.value.filter(order => order.status === activeTab.value);
});

const setActiveTab = (tab) => {
  activeTab.value = tab;
};

onMounted(() => {
  setTimeout(() => {
    isLoaded.value = true;
  }, 300);
});
</script>

<template>
  <BaseLayout>
    <div class="orders-container" :class="{ 'loaded': isLoaded }">
      <div class="orders-header">
        <h1 class="page-title">我的订单</h1>
        <p class="page-subtitle">查看和管理您的旅行订单</p>
      </div>
      
      <div class="orders-tabs">
        <div 
          class="tab-item" 
          :class="{ 'active': activeTab === 'all' }"
          @click="setActiveTab('all')"
        >
          全部订单
        </div>
        <div 
          class="tab-item" 
          :class="{ 'active': activeTab === 'processing' }"
          @click="setActiveTab('processing')"
        >
          进行中
        </div>
        <div 
          class="tab-item" 
          :class="{ 'active': activeTab === 'completed' }"
          @click="setActiveTab('completed')"
        >
          已完成
        </div>
        <div 
          class="tab-item" 
          :class="{ 'active': activeTab === 'canceled' }"
          @click="setActiveTab('canceled')"
        >
          已取消
        </div>
      </div>
      
      <div class="orders-list">
        <div 
          v-for="(order, index) in filteredOrders" 
          :key="order.id"
          class="order-card"
          :style="{ 
            animationDelay: `${index * 0.1}s`,
          }"
        >
          <div class="order-image">
            <img :src="order.image" :alt="order.title">
          </div>
          <div class="order-content">
            <div class="order-info">
              <h3 class="order-title">{{ order.title }}</h3>
              <p class="order-id">订单号: {{ order.id }}</p>
              <p class="order-date">下单日期: {{ order.date }}</p>
            </div>
            <div class="order-status-price">
              <span 
                class="order-status" 
                :class="{
                  'completed': order.status === 'completed',
                  'processing': order.status === 'processing',
                  'canceled': order.status === 'canceled'
                }"
              >
                {{ 
                  order.status === 'completed' ? '已完成' : 
                  order.status === 'processing' ? '进行中' : '已取消' 
                }}
              </span>
              <p class="order-price">¥{{ order.amount }}</p>
            </div>
          </div>
          <div class="order-actions">
            <button class="action-btn details-btn">查看详情</button>
            <button 
              class="action-btn" 
              :class="{
                'review-btn': order.status === 'completed',
                'cancel-btn': order.status === 'processing',
                'rebuy-btn': order.status === 'canceled'
              }"
            >
              {{ 
                order.status === 'completed' ? '评价' : 
                order.status === 'processing' ? '取消' : '再次购买' 
              }}
            </button>
          </div>
        </div>
        
        <div v-if="filteredOrders.length === 0" class="no-orders">
          <i class="fas fa-file-alt no-orders-icon"></i>
          <p>没有找到订单</p>
        </div>
      </div>
    </div>
  </BaseLayout>
</template>

<style scoped>
.orders-container {
  max-width: 1200px;
  margin: 40px auto;
  padding: 0 20px;
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.5s ease;
}

.orders-container.loaded {
  opacity: 1;
  transform: translateY(0);
}

.orders-header {
  margin-bottom: 30px;
  text-align: center;
  animation: fadeIn 0.8s ease-out forwards;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.page-title {
  font-size: 2.4rem;
  color: #333;
  margin-bottom: 10px;
}

.page-subtitle {
  color: #666;
  font-size: 1.1rem;
}

.orders-tabs {
  display: flex;
  justify-content: center;
  margin-bottom: 30px;
  border-bottom: 1px solid #eee;
}

.tab-item {
  padding: 12px 25px;
  font-size: 1rem;
  color: #555;
  cursor: pointer;
  position: relative;
  transition: all 0.3s ease;
}

.tab-item:hover {
  color: #00c389;
}

.tab-item.active {
  color: #00c389;
  font-weight: 500;
}

.tab-item.active::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: #00c389;
}

.orders-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.order-card {
  display: flex;
  background-color: #fff;
  border-radius: 12px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
  overflow: hidden;
  transition: all 0.3s ease;
  animation: slideIn 0.5s ease-out forwards;
  opacity: 0;
  transform: translateY(20px);
}

@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.order-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
}

.order-image {
  width: 180px;
  min-width: 180px;
  height: 140px;
  overflow: hidden;
}

.order-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.order-card:hover .order-image img {
  transform: scale(1.05);
}

.order-content {
  flex-grow: 1;
  padding: 20px;
  display: flex;
  justify-content: space-between;
}

.order-title {
  font-size: 1.2rem;
  color: #333;
  margin-bottom: 10px;
}

.order-id, .order-date {
  color: #666;
  font-size: 0.9rem;
  margin-bottom: 5px;
}

.order-status-price {
  text-align: right;
}

.order-status {
  display: inline-block;
  padding: 5px 10px;
  border-radius: 4px;
  font-size: 0.9rem;
  font-weight: 500;
  margin-bottom: 10px;
}

.order-status.completed {
  background-color: #e6f7ef;
  color: #00c389;
}

.order-status.processing {
  background-color: #e6f0ff;
  color: #4d7bf3;
}

.order-status.canceled {
  background-color: #feeae9;
  color: #f44336;
}

.order-price {
  font-size: 1.3rem;
  font-weight: 600;
  color: #333;
}

.order-actions {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 20px;
  gap: 10px;
  min-width: 120px;
  background-color: #f9f9f9;
  border-left: 1px solid #f0f0f0;
}

.action-btn {
  padding: 8px 0;
  border-radius: 6px;
  font-size: 0.9rem;
  cursor: pointer;
  transition: all 0.3s ease;
  border: none;
  width: 100%;
}

.details-btn {
  background-color: #f0f0f0;
  color: #555;
}

.details-btn:hover {
  background-color: #e0e0e0;
}

.review-btn {
  background-color: #00c389;
  color: white;
}

.review-btn:hover {
  background-color: #00b07b;
}

.cancel-btn {
  background-color: #ff5a5a;
  color: white;
}

.cancel-btn:hover {
  background-color: #ff3939;
}

.rebuy-btn {
  background-color: #4d7bf3;
  color: white;
}

.rebuy-btn:hover {
  background-color: #3d6ae3;
}

.no-orders {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 0;
  color: #888;
  animation: fadeIn 0.8s ease-out forwards;
}

.no-orders-icon {
  font-size: 4rem;
  margin-bottom: 20px;
  color: #ddd;
}

@media (max-width: 768px) {
  .order-card {
    flex-direction: column;
  }
  
  .order-image {
    width: 100%;
    height: 180px;
  }
  
  .order-content {
    flex-direction: column;
  }
  
  .order-status-price {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 15px;
    text-align: left;
  }
  
  .order-actions {
    flex-direction: row;
    border-left: none;
    border-top: 1px solid #f0f0f0;
  }
  
  .action-btn {
    flex: 1;
  }
  
  .orders-tabs {
    overflow-x: auto;
    justify-content: flex-start;
    padding-bottom: 10px;
  }
  
  .tab-item {
    white-space: nowrap;
    padding: 10px 15px;
  }
}
</style> 